<style scoped lang="scss">
.app {
    padding-left: .2rem;
    padding-right: .2rem;
}
h4 {
    font-size: .17rem;
    font-weight: 500;
}

.introduce {
    color: #ccc;

}

.blue {
    color: rgb(1, 1, 107);
}

.Lead {
    width: 95%;
    height: .7rem;
    background: #f5f5f5;
    font-size: .15rem;
    color: #89898a;
    margin-top: .2rem;
    border-radius: .1rem;
    margin-left: .1rem;

    .Lead-span {
        padding-left: .2rem;
        padding-top: .2rem;
        display: inline-block;
    }
}

.content {
    font-size: .16rem;
    line-height: .3rem;
}

.foot {
    margin-top: .1rem;
    p {
        color: red;
        padding-left:.06rem;
        padding-right: .06rem;
    }
}
.footer{
    width: 100%;
    height: 1.5rem;
    margin-top: .2rem;
    background: #f0f9ff;
    display: flex;
    .footer-img{
        margin-top: .06rem;
        color: #ccc;
        width: 1.4rem;
        height: 1.4rem;
        img{
            width: 1.4rem;
            height: 1.4rem;
            border-radius: 50%;
            border: 1px solid #ccc;
        }
    }
    .footer-lead{
        flex: 1;
        p{
            margin-top: .4rem;
            padding: 0 .1rem;
        }
    }
}
.read{
    color: #ccc;
    margin-top: .1rem;
}
.ThumbsUp{
    position: absolute;
    bottom: 0;
    width: 90%;
    height: .5rem;
    background: pink;

}
</style>

<template>
    <div class="app">
        <h4>{{ store.detail.nosocomium }} {{ store.detail.state }}门诊预约时间{{ store.detail.time }}</h4>
        <div class="introduce">
            <p>{{ store.detail.name }} <span class="blue">{{ store.detail.city }}</span> {{ store.detail.time }} {{
                store.detail.city }}</p>
        </div>
        <div class="Lead">
            <span class="Lead-span">
                导语：{{ store.detail.nosocomium }},{{ store.detail.administrativeOffice }},
                <span class="blue">{{ store.detail.name }}</span>
            </span>
        </div>
        <div class="content">
            &emsp;&emsp;1.{{ store.detail.content }}<br>
            &emsp;&emsp;2.{{ store.detail.content }}
        </div>
        <div class="foot">
            <p>【实名挂号，请患者务必带好有效身份证件】</p>
        </div>
        <div class="footer">
            <div class="footer-img">
                <img v-lazy="store.detail.img" alt="">
            </div>
            <div class="footer-lead">
                <p>
                    作者:{{ store.detail.name }},{{ store.detail.city }},{{ store.detail.nosocomium }},{{ store.detail.state }}
                </p>
            </div>
            
        </div>
        <div class="read">
            阅读：{{ store.detail.interrogation }}
        </div>
    </div>
</template>

<script lang="ts" setup>
// @ts-ignore
import { useCounterStore } from '../../pinia/index.ts'
const store: any = useCounterStore()
</script>